<template>
  <div>
    <el-form ref="listData" :model="listData" label-width="80px" class="demo-ruleForm">
      <!--<el-form :model="form" label-width="80px" ref="form">-->
      <!--==========================================================================================-->
      <el-form-item label="基本信息">1/6</el-form-item>
      <el-row>
        <el-col :span="16">
          <!--==========================================================================================-->
          <div class="box">
            <div class="box_content">
              <el-form-item label="姓名">
                <el-input v-model="listData.student_name" :value="listData.student_name" disabled />
              </el-form-item>
            </div>
            <div class="box_content">
              <el-form-item label="性别" prop="sex">
                <el-select :value="listData.sex" placeholder="请选择性别" disabled>
                  <el-option label="男" value="1" />
                  <el-option label="女" value="2" />
                </el-select>
              </el-form-item>
            </div>
            <!--<div class="box_content">
                <el-form-item label="民族" prop="nation">
                  <el-input v-model="listData.phone"></el-input>
                </el-form-item>
              </div>-->
          </div>
          <!--<div class="box">
              <div class="box_content">
                <el-form-item label="国籍" prop="nationality">
                  <el-input v-model="listData.nationality"></el-input>
                </el-form-item>
              </div>
              <div class="box_content">
                <el-form-item label="出生年月" prop="birthday">
                  <el-date-picker type="date" v-model="listData.birthday"></el-date-picker>
                </el-form-item>
              </div>
            </div>-->
          <!--==========================================================================================-->
          <div class="box">
            <!--<div class="box_content">
                <el-form-item label="联系电话" prop="phone">
                  <el-input v-model="listData.phone">
                    <template slot="prepend">+86</template>
                  </el-input>
                </el-form-item>
              </div>-->
            <div class="box_content">
              <el-form-item label="证件号码" prop="number">
                <el-input v-model="listData.card" class="input-with-select" disabled>
                  <el-select slot="prepend" v-model="listData.card_type" placeholder="请选择证件类型" style="width: 90px" disabled>
                    <el-option v-for="item in cardType" :key="item.value" :label="item.label" :value="item.value" />
                  </el-select>
                </el-input>
              </el-form-item>
            </div>
          </div>
          <!--==========================================================================================-->
          <el-form-item label="家庭信息">2/6</el-form-item>
          <!--==========================================================================================-->
          <div class="box">
            <div class="box_content">
              <el-form-item label="家长姓名">
                <el-input v-model="listData.home[0].parent_name" disabled />
              </el-form-item>
            </div>
            <div class="box_content">
              <el-form-item label="家长称谓">
                <el-select v-model="listData.home[0].relation" placeholder="请选择称谓" disabled>
                  <el-option label="爸爸" value="1" />
                  <el-option label="妈妈" value="2" />
                  <el-option label="爷爷" value="3" />
                  <el-option label="奶奶" value="4" />
                </el-select>
              </el-form-item>
            </div>
            <div class="box_content">
              <el-form-item label="联系电话">
                <el-input v-model="listData.home[0].phone" disabled>
                  <template slot="prepend">+86</template>
                </el-input>
              </el-form-item>
            </div>
          </div>
          <!--<el-row>
              <el-col :span="6">
                <el-form-item label="家长姓名">
                  <el-input v-model="form.FatherName"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="家长称谓">
                  <el-input v-model="form.DaD"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="联系电话">
                  <el-input v-model="form.FatherPhone">
                    <template slot="prepend">+86</template>
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>-->
          <!--==========================================================================================-->
          <!--<div class="box">
              <div class="box_content">
                <el-form-item label="家长姓名">
                  <el-input v-model="form.MotherName" placeholder="请输入家长姓名"></el-input>
                </el-form-item>
              </div>
              <div class="box_content">
                <el-form-item label="家长称谓">
                  <el-input v-model="form.MoM"></el-input>
                </el-form-item>
              </div>
              <div class="box_content">
                <el-form-item label="联系电话">
                  <el-input placeholder="请输入" v-model="form.MotherPhone">
                    <template slot="prepend">+86</template>
                  </el-input>
                </el-form-item>
              </div>
            </div>-->
          <div class="box">
            <div class="box_content">
              <el-form-item style="text-align: center">
                <el-button type="info">添加联系人</el-button>
              </el-form-item>
            </div>
          </div>
          <!--<el-row>
              <el-col :span="6">
                <el-form-item label="家长姓名">
                  <el-input v-model="form.MotherName"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="家长称谓">
                  <el-input v-model="form.MoM"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="联系电话">
                  <el-input v-model="form.MotherPhone">
                    <template slot="prepend">+86</template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="">
                  <el-button type="info">添加联系人</el-button>
                </el-form-item>
              </el-col>
            </el-row>-->
          <!--==========================================================================================-->
          <el-form-item label="招生信息">3/6</el-form-item>
          <!--==========================================================================================-->
          <div class="box">
            <div class="box_content">
              <el-form-item label="申请学期">
                <el-select v-model="listData.recruit.semester_id" class="select" disabled>
                  <el-option v-for="item in semester" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </el-form-item>
            </div>
            <div class="box_content">
              <el-form-item label="申请年级">
                <el-select v-model="listData.recruit.grade" class="select" disabled>
                  <el-option v-for="item in grade" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </el-form-item>
            </div>
            <div class="box_content">
              <el-form-item label="申请课程">
                <el-select v-model="listData.recruit.course_id" class="select" disabled>
                  <el-option v-for="item in course" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </el-form-item>
            </div>
            <div class="box_content">
              <el-form-item label="所属校区">
                <el-select v-model="listData.recruit.school_id" class="select" disabled>
                  <el-option v-for="item in school" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </el-form-item>
            </div>
            <div class="box_content">
              <el-form-item label="招生来源">
                <el-select v-model="listData.recruit.way" class="select" disabled>
                  <el-option v-for="item in channel" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </el-form-item>
            </div>
            <div class="box_content">
              <el-form-item label="推荐人">
                <el-input v-model="listData.recruit.referrer" disabled />
              </el-form-item>
            </div>
            <div class="box_content">
              <el-form-item label="主跟进人">
                <el-input v-model="listData.recruit.teacher_id" disabled />
              </el-form-item>
            </div>
            <div class="box_content">
              <el-form-item label="副跟进人">
                <el-select v-model="listData.recruit.deputy_teacher_id" class="select" disabled>
                  <el-option v-for="item in teacher2" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </el-form-item>
            </div>
            <div class="box_content">
              <div class="block" style="text-align: center">
                <span>意向度</span><el-rate disabled />
              </div>
            </div>
          </div>
          <!--==========================================================================================-->
        </el-col>
        <el-col :span="7" style="margin-left: 20px">
          <!--<div class="box">
              <div class="box_content4">
                2020-08-05-15:29
              </div>
              <div class="box_content4">
                电话跟进
              </div>
              <div class="box_content4">
                跟进人：李丽君
              </div>
            </div>
            <div class="box">
              <div class="box_content4" style="">
                沟通内容：请输入1000字以内
              </div>
            </div>
            <div class="box">
              <div class="box_content4">
                下次沟通时间：2020-08-05-15:29
              </div>
            </div>
            <hr/>
            <div class="box">
              <div class="box_content4">
                2020-08-05-15:29
              </div>
              <div class="box_content4">
                电话跟进
              </div>
              <div class="box_content4">
                跟进人：李丽君
              </div>
            </div>
            <div class="box">
              <div class="box_content4">
                沟通内容：请输入1000字以内
              </div>
            </div>
            <div class="box">
              <div class="box_content4">
                下次沟通时间：2020-08-05-15:29
              </div>
            </div>-->
          <div>增加跟进记录：</div>
          <el-form ref="followRecord" :model="followRecord" :rules="rules" label-width="80px">
            <div class="box">
              <div class="box_content">
                <el-form-item label="沟通时间">
                  <el-date-picker type="date" placeholder="请选择时间" style="width: 100%" />
                </el-form-item>
              </div>
              <div class="box_content">
                <el-form-item label="沟通方式" prop="communication">
                  <el-select v-model="followRecord.communication" class="select" placeholder="请选择沟通方式" style="width: 100%">
                    <el-option label="网上" value="1" />
                    <el-option label="柜台" value="2" />
                    <el-option label="电话沟通" value="3" />
                  </el-select>
                </el-form-item>
              </div>
              <div class="box_content">
                <el-form-item label="沟通内容">
                  <el-input v-model="followRecord.content" type="textarea" maxlength="1000" show-word-limit />
                </el-form-item>
              </div>
              <div class="box_content">
                <el-form-item label="">
                  <div class="block">
                    意向度<el-rate v-model="followRecord.intention" />
                  </div>
                </el-form-item>
              </div>
              <div class="box_content">
                <el-form-item label="">
                  <el-checkbox v-model="checked">下次沟通时间</el-checkbox>
                </el-form-item>
              </div>
              <div class="box_content">
                <el-form-item prop="next_time">
                  <el-date-picker v-if="checked==false" v-model="followRecord.next_time" type="date" placeholder="请选择时间" style="width: 100%" disabled />
                  <el-date-picker v-if="checked==true" v-model="followRecord.next_time" type="date" placeholder="请选择时间" style="width: 100%" />
                </el-form-item>
              </div>
            </div>
            <div class="box" style="text-align: center">
              <div class="box_content">
                <el-form-item prop="Time2">
                  <el-button type="primary" @click="resetForm('followRecord')">重 置</el-button>
                  <el-button type="primary" @click="submitForm('followRecord')">确 定</el-button>
                </el-form-item>
              </div>
            </div>
          </el-form>
        </el-col>
      </el-row>
      <el-col :span="1" />
      <el-col :span="4" style="margin-left: 60px">

        <!--<el-row>
              <div style="font-size: 20px;font-weight: bold">
                增加跟进记录：
              </div>
              <el-form-item label="沟通时间" prop="Time">
                <el-date-picker type="date" placeholder="请选择时间" v-model="Talk.Time" style="width: 100%"></el-date-picker>
              </el-form-item>
              <el-form-item label="沟通方式" prop="Talk">
                <el-select class="select" v-model="Talk.Talk" placeholder="请选择沟通方式" style="width: 100%">
                  <el-option label="网上" value="1"></el-option>
                  <el-option label="柜台" value="2"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="">
                <div class="block">
                  意向度<el-rate></el-rate>
                </div>
              </el-form-item>
              <el-form-item label="沟通内容">
                <el-input type="textarea" v-model="Talk.Talktextarea" maxlength="1000" show-word-limit></el-input>
              </el-form-item>
              <el-form-item label="">
                <el-checkbox v-model="checked">下次沟通时间</el-checkbox>
              </el-form-item>
              <el-form-item prop="Time2">
                <el-date-picker type="date" placeholder="请选择时间" v-model="Talk.Time2" style="width: 100%"></el-date-picker>
              </el-form-item>
              <el-form-item prop="Time2">
                <el-button type="primary" @click="resetForm('Talk')">重 置</el-button>
                <el-button type="primary" @click="submitForm('Talk')">确 定</el-button>
              </el-form-item>
            </el-row>-->
      </el-col>
      <!--==========================================================================================-->
      <el-form-item label="学业信息">4/6</el-form-item>
      <!--==========================================================================================-->
      <div class="box">
        <div class="box_content2">
          <el-form-item label="曾读学校">
            <el-select v-model="listData.course.school" class="select" disabled>
              <el-option v-for="item in school" :key="item.value" :label="item.label" :value="item.label" />
            </el-select>
          </el-form-item>
        </div>
        <div class="box_content2">
          <el-form-item label="语文">
            <el-input v-model="listData.course.Chinese" disabled />
          </el-form-item>
        </div>
        <div class="box_content2">
          <el-form-item label="数学">
            <el-input v-model="listData.course.Mathematics" disabled />
          </el-form-item>
        </div>
        <div class="box_content2">
          <el-form-item label="英语">
            <el-input v-model="listData.course.English" disabled />
          </el-form-item>
        </div>
        <div class="box_content2">
          <el-form-item label="物理">
            <el-input v-model="listData.course.Physics" disabled />
          </el-form-item>
        </div>
        <div class="box_content2">
          <el-form-item label="化学">
            <el-input v-model="listData.course.Chemistry" disabled />
          </el-form-item>
        </div>
      </div>
      <!--==========================================================================================-->
      <div class="box">
        <div class="box_content2">
          <el-form-item label="曾读年级">
            <el-select v-model="listData.course.grade" class="select" disabled>
              <el-option v-for="item in grade" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
        </div>
        <div class="box_content2">
          <el-form-item label="历史">
            <el-input v-model="listData.course.History" disabled />
          </el-form-item>
        </div>
        <div class="box_content2">
          <el-form-item label="地理">
            <el-input v-model="listData.course.Geography" disabled />
          </el-form-item>
        </div>
        <div class="box_content2">
          <el-form-item label="政治">
            <el-input v-model="listData.course.Politics" disabled />
          </el-form-item>
        </div>
        <div class="box_content2">
          <el-form-item label="生物">
            <el-input v-model="listData.course.Biology" disabled />
          </el-form-item>
        </div>
        <div class="box_content2">
          <el-form-item label="信息科技">
            <el-input v-model="listData.course.computer" disabled />
          </el-form-item>
        </div>
      </div>
      <!--<el-row>
          <el-col :span="4">
            <el-form-item label="曾读年级">
              <el-select class="select" v-model="SelectGradeing">
                <el-option v-for="item in grade" :key="item.value" :label="item.label" :value="item.label"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="历史">
              <el-input v-model="form.History"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="地理">
              <el-input v-model="form.Geography"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="政治">
              <el-input v-model="form.Politics"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="生物">
              <el-input v-model="form.Biology"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="信息科技">
              <el-input v-model="form.Technology"></el-input>
            </el-form-item>
          </el-col>
        </el-row>-->
      <!--==========================================================================================-->
      <el-form-item label="其他学校">5/6</el-form-item>
      <!--==========================================================================================-->
      <el-row>
        <el-col :span="4">
          <el-form-item label="户籍地址" prop="province">
            <el-cascader
              ref="cascaderCity"
              v-model="realname"
              :value="cityArr"
              style="width: 300px"
              :options="options"
              disabled
              :props="{
                value: 'id',
                label: 'name',
                ...props
              }"
              @change="handleChange"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <!--==========================================================================================-->
      <el-row>
        <el-col :span="24">
          <el-form-item label="地址" prop="DetailedAddress">
            <el-input v-model="listData.address" disabled />
          </el-form-item>
        </el-col>
      </el-row>
      <!--==========================================================================================-->
      <el-row>
        <el-form-item label="备注">
          <el-input v-model="listData.remark" type="textarea" maxlength="1000" show-word-limit disabled />
        </el-form-item>
      </el-row>
      <!--==========================================================================================-->

      <!--==========================================================================================-->
      <el-form-item label="跟进记录">6/6</el-form-item>
      <div v-for="(item,index) in listData.follow" :key="index" style="font-weight: bold">
        <el-row class="selectFont">
          <el-col :span="4">
            <div>2020-08-05 15:29</div>
          </el-col>
          <el-col :span="4">
            <div v-if="item.communication==1">网上</div>
            <div v-if="item.communication==2">柜台</div>
            <div v-if="item.communication==3">电话沟通</div>
          </el-col>
          <el-col :span="4">
            <div>跟进人：{{ userName }}</div>
          </el-col>
        </el-row>
        <el-row class="selectFont">
          <el-col :span="6">
            <div>{{ item.content }}</div>
          </el-col>
        </el-row>
        <el-row class="selectFont">
          <el-col :span="6">
            <div>{{ item.next_time }}</div>
          </el-col>
        </el-row>
        <hr>
      </div>
      <!--==========================================================================================-->
    </el-form>
    <!--==========================================================================================-->
  </div>
</template>

<script>
import addressData from '@/components/CascaderCity/addressData.json'
import { addFollow } from '@/api/studentRecruit.js'
import store from '../../../store'
export default {
    name: 'SelectStudent',
    /* 城市级联*/
    props: {
        listData: {
            type: Array,
            default: () => []
        },
        /**
         * 默认区域传入格式:
         * 非多选(props.multiple = false): 北京市/北京市/东城区
         * 多选(props.multiple = true): 北京市/北京市/东城区,广东省/广州市/天河区
         */
        value: {
            type: String,
            default: ''
        },
        /**
         * 默认是regionData
         * regionData(省市区) provinceAndCityData(省市)
         */
        optionType: {
            type: String,
            default: 'regionData',
            validator: function(value) {
                return ['regionData', 'provinceAndCityData'].indexOf(value) !== -1 // 这个值必须匹配下列字符串中的一个
            }
        },
        /**
         * 是否需要开启全国
         */
        isAddAll: {
            type: Boolean,
            default: false
        },
        placeholder: {
            type: String,
            default: ''
        },
        props: {
            type: Object,
            default() {
                return {}
            }
        }
    },
    data() {
        return {
            userName: store.getters.name,
            ntime: '',
            realname: '',
            checked: false,
            followRecord: {
            /* 单选框*/
                student_id: 0, // 学生id
                communication: null, // 沟通方式
                intention: 0, // 意向度
                content: '', // 沟通内容
                next_time: '' // 下次沟通时间
            },
            /* 弹出框属性*/
            NewStudentFile: false,
            /* 城市级联*/
            cityArr: [],
            options: [],
            isChange: false,
            form: {
                name: '', /* 姓名*/
                sex: '', /* 性别*/
                nation: '', /* 民族*/
                nationality: '', /* 国籍*/
                birthday: '', /* 出生年月日*/
                phone: '', /* 联系电话*/
                number: '', /* 身份证号码*/
                recommend: '', /* 推荐人*/
                teacher: '', /* 主跟进人*/
                DaD: '爸爸', /* 父亲称谓*/
                MoM: '妈妈', /* 母亲称谓*/
                FatherName: '', /* 父亲名字*/
                MotherName: '', /* 母亲名字*/
                FatherPhone: '', /* 爸爸电话*/
                MotherPhone: '', /* 妈妈电话*/
                Chinese: '', /* 语文*/
                Math: '', /* 数学*/
                English: '', /* 英语*/
                Physics: '', /* 物理*/
                Chemistry: '', /* 化学*/
                History: '', /* 历史*/
                Geography: '', /* 地理*/
                Politics: '', /* 政治*/
                Biology: '', /* 生物*/
                Technology: '', /* 信息科技*/
                DetailedAddress: '', /* 详细地址*/
                textarea: '', /* 备注*/
                SelectTeacher: '',
                province: []
            },
            SelectSemester: '',
            SelectGrade: '',
            SelectCourse: '',
            SelectSchool: '',
            SelectTeacher: '',
            SelectChannel: '',
            SelectTeacher2: '',
            SelectSchooling: '',
            SelectGradeing: '',
            province: [],
            city: '',
            area: '',
            /* 证件*/
            cardType: [{
                value: 1,
                label: '身份证'
            }, {
                value: 2,
                label: '军官证'
            }],
            /* 学期*/
            semester: [{
                value: 1,
                label: '第一学期'
            }, {
                value: 2,
                label: '第二学期'
            }],
            /* 曾读学校*/
            school: [{
                value: 1,
                label: '一小'
            }, {
                value: 2,
                label: '二小'
            }],
            /* 招生来源*/
            channel: [{
                value: 1,
                label: '网上'
            }, {
                value: 2,
                label: '专台'
            }],
            /* 年级*/
            grade: [{
                value: 1,
                label: '一年级'
            }, {
                value: 2,
                label: '二年级'
            }],
            /* 课程*/
            course: [{
                value: 1,
                label: '语文'
            }, {
                value: 2,
                label: '英语'
            }, {
                value: 3,
                label: '数学'
            }],
            /* 副跟进人*/
            teacher2: [{
                value: 1,
                label: '陈老师'
            }, {
                value: 2,
                label: '李老师'
            }],
            /* 表单验证*/
            rules: {
                communication: [
                    { required: true, message: '不能为空', trigger: 'blur,change' }
                ],
                next_time: [
                    { required: true, message: '不能为空', trigger: 'blur,change' }
                ]
            }
        }
    },
    /* 城市级联*/
    watch: {
        /* 监听listData*/
        listData: {
            handler(res) {
                this.realname = [res.province, res.city, res.area]
                this.followRecord.student_id = res.unid

                console.log(res)
            },
            // 代表在wacth里声明了listData这个方法之后立即先去执行handler方法
            immediate: true,
            deep: true // 代表是否深度监听
        },
        value(val) {
            if (this.isChange) {
                this.isChange = false
            } else {
                this.setDefaultCity()
                const panel = this.$refs.cascaderCity.$refs.panel
                panel.clearCheckedNodes() // 清空级联选择器选中状态
                panel.activePath = [] // 清除高亮
            }
        }
    },
    /* 城市级联*/
    created() {
        this.listData.sex = this.listData.sex.toString()
        this.listData.home[0].relation = this.listData.home[0].relation.toString()
        this.setDefaultCity()
        this.init()
    },
    /* 城市级联*/
    methods: {
        /* 提交*/
        submitForm(formName) {
            console.log(this.followRecord.next_time.getFullYear() + '-' + (this.followRecord.next_time.getMonth() + 1) + '-' + this.followRecord.next_time.getDate())
            this.ntime = this.followRecord.next_time.getFullYear() + '-' + (this.followRecord.next_time.getMonth() + 1) + '-' + this.followRecord.next_time.getDate()
            this.followRecord.next_time = this.ntime
            console.log(store.getters.name)
            /* let addData={
            student_id:70,  //学生id
            communication:1, //沟通方式
            intention:5, //意向度
            content:'QNMLGB', //沟通内容
            next_time:'2018-11-11', //下次沟通时间
          }*/
            /* this.NewStudentFile = false*/
            /* console.log("6666666666")
          console.log(this.followRecord)
          console.log("6666666666")
          console.log(this.followRecord)*/
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    addFollow(this.followRecord)
                    this.$message.success('跟进成功！')
                } else {
                    this.$message.error('跟进失败！')
                    return false
                }
            })
        },
        /* 重置*/
        resetForm(formName) {
            this.$refs[formName].resetFields()
        },
        /**
         * 初始化数据已选的数据
         */
        setDefaultCity() {
            // 判断是否有默认区域再判断是否开启多选
            const value = JSON.parse(JSON.stringify(this.value))
            let data = []
            if (value !== '' && typeof value === 'string') {
                if (this.props.multiple) {
                    data = value.split(',').map(item => {
                        return this.handleDefaultRegion(item)
                    })
                } else {
                    data = this.handleDefaultRegion(value)
                }
            }
            this.cityArr = data
        },
        /**
         * 字符串拆分出数组
         */
        handleDefaultRegion(value) {
            return value.split('/')
        },
        /**
         * 将数组拼接回字符串
         */
        handleRegionStr(value) {
            let str = ''
            value.forEach(item => {
                str += item + '/'
            })
            return str.slice(0, str.length - 1)
        },
        /**
         * 初始化省市区数据
         */
        init() {
            const cityData = JSON.parse(JSON.stringify(addressData)) // 避免JSON源被改变
            if (this.isAddAll) {
                cityData.unshift({ id: 0, name: '全国' }) // 插入全国选项
            }
            switch (this.optionType) {
                case 'regionData': // 省市区
                    this.options = cityData
                    break
                case 'provinceAndCityData': // 省市
                    this.options = cityData.map(item => {
                        if (item.children) {
                            item.children.map(item1 => {
                                item1.children = null // 删除一个最后个区
                                return item1
                            })
                        }
                        return item
                    })
                    break
                default:
                    console.error('请选择正确的optionType！')
                    break
            }
        },
        handleChange(event) {
            this.$emit('change', event)
            this.cityArr = event
            let str = ''
            if (this.props.multiple) { // 多选
                event.forEach(item => {
                    str += this.handleRegionStr(item) + ','
                })
                str = str.slice(0, str.length - 1)
            } else {
                str = this.handleRegionStr(event)
            }
            this.isChange = true
            this.$emit('input', str)
            console.log('选中:', event)
        }
    }
}
</script>

<style scoped>
  .selectFont{
    font-size: 15px;
  }
  .box{
    width: 100%;
    display: flex;
    flex-direction: row;
    /*//两侧对齐*/
    justify-content:space-between;
    /*//自动换行*/
    flex-wrap: wrap;
    /*//清除上下行的中间空隙*/
    align-content: flex-start;
  }
  .box_content{
    flex: 30 0 250px;
  }
  .box_content2{
    flex: 30 0 200px;
  }
  .box_content4{
    flex: 30 0 120px;
    margin-bottom: 10px;
    font-size: 15px;
  }
  /*//解决最后一行的问题*/
  .box:after{
    content: '';
    width: 30%;
  }
</style>
